<template>
	<div class="box box-question">
		<header  class="title-header">
			<h5  class="title">常见问题</h5> 
		</header>
		<div class="panel-content">
			<div class="banner-list clearfix">
				<ul  class="banner-list clearfix">
					<!---->
					<li  class="goumai">
						<h3  class="title">购买指南</h3>
						<!---->
						<ul  class="sub-question clearfix">
							<!---->
							<li >
								<a  href="#">购买渠道</a>
							<li >
								<a  href="#">支付方式</a>
							</li>
							<li >
								<a  href="#">支付时效</a>
							</li>
							<li >
								<a  href="#">分期付款</a>
							</li>
							<li >
								<a  href="#">发票说明</a>
							</li>
							<li >
								<a  href="#">修改发票抬头</a>
							</li>
						</ul>
					</li>
					<li  class="dingdan">
						<h3  class="title">订单物流</h3>
						<!---->
						<ul  class="sub-question clearfix">
							<!---->
							<li >
								<a  href="#">修改订单</a>
							</li>
							<li >
								<a  href="#">发货时效</a>
							</li>
							<li >
								<a  href="#">订单及物流</a>
							</li>
							<li >
								<a  href="#">包邮政策</a>
							</li>
							<li >
								<a  href="#">签收须知</a>
							</li>
						</ul>
					</li>
					<li  class="jishu">
						<h3  class="title">技术支持</h3>
						<!---->
						<ul  class="sub-question clearfix">
							<!---->
							<li >
								<a  href="#">强制重新启动</a>
							</li>
							<li >
								<a  href="#">截屏功能</a>
							</li>
							<li >
								<a  href="#">延长续航时间</a>
							</li>
							<li >
								<a  href="#">定位导航</a>
							</li>
							<li >
								<a  href="#">手机开机激活方法</a>
							</li>
						</ul>
						<ul  class="sub-question clearfix">
							<!---->
							<li >
								<a  href="#">支持耳机接口标准</a>
							</li>
						</ul>
					</li>
					<li  class="shouhou">
						<h3  class="title">售后政策</h3>
						<!---->
						<ul  class="sub-question clearfix">
							<!---->
							<li >
								<a  href="#">手机产品</a>
							</li>
							<li >
								<a  href="#">手机附件</a>
							</li>
							<li >
								<a  href="#">耳机、坚果自拍杆</a>
							</li>
							<li >
								<a  href="#">合作厂商商品</a>
							</li>
							<li >
								<a  href="#">三包权益</a>
							</li>
						</ul>
						<ul  class="sub-question clearfix">
							<!---->
							<li >
								<a  href="#">意外碎屏保修服务</a>
							</li>
							<li >
								<a  href="#">意外损坏保修服务</a>
							</li>
							<li >
								<a  href="#">延长保修服务</a>
							</li>
						</ul>
					</li>
				</ul>
			</div>
		</div>
	</div>
</template>

<script>
	
</script>

<style scoped>
.content {
    clear: both;
    width: 1220px;
    min-height: 600px;
    padding: 0 0 25px;
    margin: 0 auto;
}
/*常见问题的样式 start*/
.content .box {
    overflow: hidden;
    z-index: 0;
    margin-top: 29px;
    border: 1px solid rgba(0,0,0,.14);
    border-radius: 8px;
    background: #fff;
    box-shadow: 0 3px 8px -6px rgba(0,0,0,.1);
}
.box-question .title-header{
	display: block;
    font-size: 18px;
    line-height: 60px;
    color: #9f9f9f;
    background: #fafafa;
    border-bottom: 1px solid rgba(0,0,0,.1);
}
.box-question .title{			
	margin-left: 30px;
}
.box-question .panel-content{
	    overflow: hidden;
		transition: all .3s ease-in-out;
}

.box-question .banner-list > li {
    width: 50%;
    padding: 38px 0 35px 120px;
    background-repeat: no-repeat;
    background-size: 54px auto;
    background-position-x: 35px;
    background-image: url(http://static.smartisanos.cn/service/assets/images/question-icon.9061b2228768f4b09c58e907f170570b.png);
    background-image: -webkit-image-set(url(http://static.smartisanos.cn/service/assets/images/question-icon.9061b2228768f4b09c58e907f170570b.png));
}
.box .banner-list > li {
    float: left;
    box-sizing: border-box;
    border-right: 1px solid #ececec;
    border-bottom: 1px solid #ececec;
}
.box-question .banner-list > li .title {
    font-size: 16px;
    line-height: 1em;
    margin-bottom: 20px;
    color: #333;
}
.box-question .banner-list > li ul {
    font-size: 12px;
    line-height: 1em;
    color: #999;
    overflow: hidden;
    margin-top: 12px;
}
.box-question .banner-list > li ul li:first-child {
    padding-left: 0;
}
.box-question .banner-list > li ul li {
    float: left;
    padding-left: 16px;
    position: relative;
}
.box-question .banner-list > li ul li:before {
    content: "\B7";
    position: absolute;
    left: 5px;
}
.box-question .banner-list > li a {
    color: #a7a7a7;
    
}
.box-question .banner-list > li a:hover{
	color: #5079d9;
	cursor: pointer;
    transition: all .15s ease-out;
    text-decoration: none;
}
.box-question .banner-list > li.goumai {
    background-position-y: 33px;
}
.box-question .banner-list > li.dingdan {
    background-position-y: -232px;
}
.box-question .banner-list > li.jishu {
    background-position-y: -90px;
}
.box-question .banner-list > li.shouhou {
    background-position-y: -344px;
}
</style>